<mat-form-field [color]="color" class="full-width">
    <mat-label>
        <span *ngIf="isRequired" class="required">
            <i class="fa fa-asterisk"></i>
        </span>
        {{labelTitle}}
    </mat-label>
    <input matInput #input [placeholder]="placeholder" [formControl]="reactiveFormControl" [type]="inputType" [maxlength]="maxLength">
    <i matSuffix *ngIf="type === 'password'" [class]="inputType ==='password'? 'fa fa-eye':'fa fa-eye-slash'" (click)="changeType()"></i>
    <mat-hint *ngIf="maxLength" align="end">{{input.value?.length || 0}}/{{maxLength}}</mat-hint>
    <mat-error>
        <op-single-error-message [formModel]="ngForm" [fieldModel]="reactiveFormControl" [labelTitle]="labelTitle"></op-single-error-message>
    </mat-error>
</mat-form-field>